<template>
  <div class="app-container">
    <div class="top">
      <div class="top_title">我的项目</div>
      <el-button type="primary" @click="handleAdd">新建项目</el-button>
    </div>
    <div class="main">
      <div class="project" v-for="(item,index) in projectList" :key="index" @click="toProject(item)">
        <div class="project_top">
          <svg-icon class="title_icon" icon-class="project" />
          <!-- <i class="el-icon-more" style="font-size:20px"></i> -->
          <el-dropdown>
            <span class="el-dropdown-link" @click.stop>
              <i class="el-icon-more" style="font-size:0.25rem"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handleDelete(item)">删除</el-dropdown-item>
              <el-dropdown-item @click.native="handleUpdate(item)">修改</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="project_title">{{ item.projectName }}</div>
        <div class="project_info">
          
         
          <div class="info">
            <div class="left">
              <i class="el-icon-tickets box_icon"></i>备注
            </div>
            <div class="right">{{ item.remarks?item.remarks:"无" }}</div>
          </div>
          <div class="info">
            <div class="left">
              <i class="el-icon-user box_icon"></i>创建者
            </div>
            <div class="right">{{ item.createBy }}</div>
          </div>
          <div class="info">
            <div class="left">
               <i class="el-icon-time box_icon"></i>开始时间
            </div>
            <div class="right">{{ item.startDate }}</div>
          </div>
        </div>
        <!-- <div class="process_line"> -->
          <!-- <div class="percentage">{{ `${item.percentage} %` }}</div>
          <el-progress :percentage="item.percentage" :format="format"></el-progress>-->
        <!-- </div> -->
        <!-- <div class="project_bottom"> -->
          <!-- <div class="date">{{ item.startDate }}</div> -->
        <!-- </div> -->
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="visible" width="6rem" :before-close="close">
      <el-form ref="form" :model="form" :rules="rules" label-width="1.25rem">
        <el-form-item label="项目名称" prop="projectName">
          <el-input v-model="form.projectName"  :disabled="isdisabled"></el-input>
        </el-form-item>
        <el-form-item label="开始日期" prop="startDate">
          <el-date-picker
            v-model="form.startDate"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm"
            type="datetime"
            placeholder="选择日期"
          />
        </el-form-item>
        <!-- <el-form-item label="项目类型">
          <el-select v-model="form.projectType" placeholder="请选择项目类型">
            <el-option
              :label="item.name"
              :value="item.name"
              v-for="(item,index) in projectTypeList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目流程">
          <el-select v-model="form.projectFlow" placeholder="请选择项目流程">
            <el-option
              :label="item.name"
              :value="item.name"
              v-for="(item,index) in projectFlowList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="项目发起人">
          <el-select v-model="form.projectSponsor" placeholder="请选择项目发起人">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
          <el-input v-model="form.projectSponsor"></el-input>
        </el-form-item> -->
        <el-form-item label="备注" prop="remark">
          <el-input
                v-model="form.remark"
                type="textarea"
                placeholder="请输入备注"
                style="width: 100%"
              />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认</el-button>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import card from "@/views/homePage/components/card";
import project from "@/api/workflow/project.js";
export default {
  data() {
    return {
      activeTab: "myApprovals",
      title: "新增项目",
      componentName: "purchaseApply",
      visible: false,
      visibleType: "add",
      form: {},
      // 表单校验
      rules: {
        projectName: [
          { required: true, message: "项目名称不能为空", trigger: "blur" }
        ],
        startDate: [
          { required: true, message: "开始日期不能为空", trigger: "blur" }
        ],
        projectType: [
          { required: true, message: "项目类型不能为空", trigger: "blur" }
        ],
        projectFlow: [
          { required: true, message: "项目流程不能为空", trigger: "blur" }
        ],
        projectSponsor: [
          { required: true, message: "项目发起人不能为空", trigger: "blur" }
        ]
      },
      projectTypeList: [
        {
          name: "项目采购"
        }
      ],
      projectFlowList: [
        {
          name: "采购申请"
        }
      ],
      projectList: [],
      isdisabled:false,
    };
  },
  components: {
    card
    // myApprovals
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      project.getProjectList().then(res => {
        this.projectList = res.rows;
        if(this.projectList){
          for(let i=0;i<this.projectList.length;i++){
            if (this.projectList[i].remark){
              this.projectList[i].remarks=this.projectList[i].remark.slice(0,10)
            }
          }
        }
      });
    },
    handleAdd() {
      this.visible = true;
      this.visibleType = "add";
      this.title="新增项目"
      this.form = {
        projectSponsor: this.$store.state.user.name
      };
    },
    close() {
      this.form={};
      this.resetForm("form")
      this.isdisabled=false;
      this.visible = false;
    },
    handleDelete(item) {
      this.$confirm("是否确认删除本项目?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          project.deleteProject(item.id).then(res => {
            this.getList();
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          });
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除"
          // });
        });
    },
    handleUpdate(project) {
      this.visible = true;
      this.isdisabled=true
      this.visibleType = "update";
      this.title="修改项目";
      this.form = project;
    },
    onSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.visibleType == "add") {
            project.AddProject(this.form).then(res => {
              if (res.code == 200) {
                this.getList();
                this.$message.success("新增项目成功！");
              }
            });
          } else {
            project.UpdateProject(this.form).then(res => {
              if (res.code == 200) {
                this.getList();
                this.$message.success("修改项目成功！");
              }
            });
          }
        }
        this.close()
      });
    },
    handleClick() {},
    setComponent(apply) {
      this.title = `我的申请（${apply.applyName}）`;
      this.componentName = apply.component;
    },
    format(percentage) {
      return "";
    },
    toProject(row) {
      this.$router.push({
        path:"/pm/project",
        query:{
          row:row
        }
      });
    }
  }
};
</script>

        <style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  padding: 0.125rem;
  overflow: auto;
  background: #edefef;
  letter-spacing: 0.02rem;
  .top {
    width: 100%;
    margin-bottom: 0.125rem;
    background-color: #ffffff;
    height: 0.4875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.225rem;
    font-weight: 600;
    color: #000000;
    padding: 0.48rem;
  }
  .main {
    overflow-x: auto;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    // align-items: center;
    //height: calc(100% - 0.125rem - 0.48rem - 0.48rem);
    // background: #606266;
    .project {
      cursor: pointer;
      padding: 0.3rem;
      width: calc(20% - 0.125rem);
      height: calc(30% - 0.0625rem);
      background: #ffffff;
      margin-bottom: 0.125rem;
      margin-right: 0.125rem;
      .project_top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.2rem;
      }
      .project_title {
        font-size: 0.225rem;
        font-weight: 600;
        height: 0.65rem;
        // margin-bottom: 0.2rem;
      }
      .project_info {
        .info {
          font-size: 0.175rem;
          margin-top: 0.2rem;
          font-weight: 600;
          display: flex;
          align-items: center;
          .left {
            width: 50%;
            display: flex;
            align-items: center;
            color: rgb(168, 174, 187);
          }
        }
      }
      .process_line {
        margin-bottom: 0.2rem;
        .percentage {
          padding: 0 0.125rem;
          font-size: 0.2rem;
        }
      }
      .project_bottom {
        margin-bottom: 0.2rem;
        display: flex;
        align-items: center;
        .date {
          font-size: 0.2rem;
        }
      }
      .btn {
        width: 100%;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
::v-deep .el-progress-bar {
  padding-right: 0;
  margin-right: 0;
}
::v-deep .el-tabs--top .el-tabs__item.is-top:nth-child(2),
.el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
.el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) {
  padding: 0 0.5rem;
}
::v-deep .el-tabs__content {
  height: calc(100% - 0.5rem);
}
::v-deep .el-tabs__item {
  font-size: 0.2rem;
  font-weight: 600;
  height: 0.625rem;
  line-height: 0.625rem;
  padding: 0 0.5rem;
  color: #606266;
}
.content {
  width: 100%;
  height: 100%;
}
.box_icon {
  font-size: 18px;
  margin-right: 0.125rem;
}
.title_icon {
  font-size: 0.375rem;
}
</style>
